<template>
    <div class="dataContainer">
      <!-- Search start -->
      <el-form :inline="true" size="small" :model="queryParams" class="demo-form-inline searchContainer" >
        <el-form-item label="合约代码: ">
            <el-input v-model="queryParams.instrumentCode" placeholder="请输入合约代码"  @keyup.enter="onSearch"  style="width: 180px;"/>
        </el-form-item>
        <!-- <el-form-item label="状态: ">
            <el-select v-model="queryParams.status" placeholder="请输入状态" collapse-tags clearable  style="width: 180px">
                <el-option label="已驳回" :value="-2" />
                <el-option label="已撤销" :value="-1" />
                <el-option label="待审核" :value="0" />
                <el-option label="已通过" :value="1" />
            </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button class="bs-form-btn" size="small" type="primary" @click="onSearch" ><el-icon><Search /></el-icon>查 询</el-button>
          <ResetButton :queryParams="queryParams"/>
        </el-form-item>
      </el-form>
      <!-- Search end -->
  
      <!-- Table start -->
      <div style="text-align: left;">
        <div v-for="(item,index) in tableData" :key="index" style="border-bottom: solid 1px #f5f5f5;padding-bottom: 10px;">
            <p >
                <span v-if="item.sendTime != null" style="color:red;">定时发送时间 = {{ item.sendTime }}</span>
                <span v-else style="color:red;">此消息发送方式为立即发送</span>
                <span>【{{ item.content }}】</span>
                <span>{{ item.remark }}</span>
            </p>
            <div >状态 : 
                <template v-if="item.status==-1">
                    <el-tag type="info">已撤销</el-tag>
                </template>
                <template v-else-if="item.status==-2">  
                    <el-tag type="danger">已驳回</el-tag>
                </template>
                <template v-else-if="item.status==0">  
                    <el-tag type="warning">待审核</el-tag>
                </template>
                <template v-else-if="item.status==1">  
                    <el-tag type="primary">已通过</el-tag>
                </template>
            </div>
        </div>
      </div>
      <AddOrUpdate ref="addOrUpdateRef" @flushTable="selectByPage"  />
      <el-dialog
        title="审批"
        v-model="visable"
        width="37%"
        :close-on-click-modal="false"
        :draggable="true"
        style="max-width: 600px;"
      >
        <div class="bs-dialog">
          <el-form
            ref="addRef"
            :model="approvalForm"
            label-width="auto"
            style="width: 95%;padding-left: 2%;text-align: left;"
          >
              <el-form-item label="审批: " prop="mode" id="mode">
                  <el-radio-group v-model="approvalForm.status">
                      <el-radio :value="-2"  border style="color: red;">驳回</el-radio>
                      <el-radio :value="1"  border style="color: #1b89fb;">通过</el-radio>
                  </el-radio-group>
              </el-form-item>
              <el-form-item label="备注:" >
               <el-input type="textarea" :rows="6" v-model="approvalForm.remark" placeholder="请输入审批备注"  clearable/>
              </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer" style="text-align: right;margin-right: 1%;">
            <el-button  size="small" @click="visable = false"> 取消 </el-button>
            <el-button  size="small" type="primary" @click="confirmEvent"> 保存 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  <script>
  import { selectByPage, deleteItem, approval, getWebList } from '@/api/oss/advice.js'
  import { getAll } from '@/api/oss/student.js'
  import { mapState } from 'vuex'
  import AddOrUpdate from './addOrUpdate.vue'
  export default {
      components:{
        AddOrUpdate
      },
      data() {
          return {
            visable:false,
            tableTotal: 0,
            tableLoading: false,
            tableData: [],
            // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 20,
                instrumentCode:'',
                status:'',
            },
            columnList:[
            {prop:'instrumentCode',label:'合约代码',sortable:false,sort:1,hide:false,fixed:true,width:150},
            {prop:'content',label:'投资建议',sortable:false,sort:2,hide:false,fixed:false,width:450},
            {prop:'sendTime',label:'发送时间',sortable:false,sort:4,hide:false,fixed:false,width:180},
            {prop:'creatorName',label:'创建人',sortable:false,sort:4,hide:false,fixed:false,width:180},
            {prop:'createTime',label:'创建时间',sortable:false,sort:4,hide:false,fixed:false,width:180},
            {prop:'action',label:'操作',sortable:false,sort:12,hide:false,fixed:'right',width:200},
            ],
            tableHeight:(window.innerHeight - 380) + 'px',
            // 学员列表
            studentList:[],
            approvalForm:{
                id:"",
                status:"",
                remark:"",
            },
          }
      },
      created() {
          // 列按照sort升序
          this.columnList = this.columnList.sort((a,b)=>a.sort-b.sort)
          this.selectByPage()
      },
      computed:{
          ...mapState(['amplify'])
      },
      mounted(){
          this.$nextTick(()=>{
              this.countTableHeight()
              // 获取所有学员信息
              getAll({}).then(res=>{
                if (res.code == 1) {
                    this.studentList = res.data
                }
              })
          })
      },
      methods: {
        repeal(id){
            this.$confirm("请确认是否撤销 ?", "警告  ! ! !", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let param = {
                    id:id,
                    status:-1,

                }
                approval(param).then(res=>{
                    if (res.code == 1) {
                        this.$message.success(res.message)
                        window.setTimeout(()=>{
                            this.visable = false
                            this.onSearch()
                        },300)
                    }
                })
            })
            
        },
        // 提交审批
        confirmEvent(){
            approval(this.approvalForm).then(res=>{
                if (res.code == 1) {
                    this.$message.success(res.message)
                    window.setTimeout(()=>{
                        this.visable = false
                        this.onSearch()
                    },300)
                }
            })
        },
        deleteRow(id){
            this.$confirm("请确认是否删除 ?", "警告  ! ! !", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                deleteItem({id:id}).then(res => {
                    if (res.code == 1) {
                        this.$message.success(res.message)
                        // 重新获取数据
                        this.onSearch()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            })
        },
        // 打开新增弹窗事件
        openAddModal() {
            this.$refs.addOrUpdateRef.openModal(null)
        },
        approvalRow(id){
            this.visable = true
            this.approvalForm.id = id
            this.approvalForm.status = ""
            this.approvalForm.remark = ""
        },
        // 搜索事件
        onSearch() {
            this.queryParams.pageNo = 1
            this.selectByPage()
        },
        // 分页查询事件
        selectByPage() {
            this.tableLoading = true
            getWebList(this.queryParams).then((res) => {
                this.tableLoading = false
                if (res.code === 1) {
                    this.tableData = res.data
                    // this.tableTotal = res.data.total
                }
            }).catch(() => {
                this.tableLoading = false
            })
        },
        // 表格高度
        countTableHeight(){
          let tableHeight = (window.innerHeight - 380) + 'px'
          // 计算搜索区域
          var searchContainerList =  document.getElementsByClassName("searchContainer")
          if (this.arrIsNotEmpty(searchContainerList) && this.arrIsNotEmpty(searchContainerList[0])) {
                    let searchContainerHeight = searchContainerList[0].offsetHeight
                    // header高度+面包屑高度+tab多标签页高度+tab多标签页底部margin的高度
                    let staticHeight = 60+38+30+15
                    if (this.amplify == true) {
                        // 放大后 , 就没有头部, 面包屑, tab多标签页了 , 预留70px给空白 , 并预留50px给分页
                        tableHeight = window.innerHeight - searchContainerHeight - 50 - 70 + 'px'
                    } else {
                        tableHeight = window.innerHeight - (staticHeight + searchContainerHeight) - 50 - 50 + 'px'
                    }
                    this.tableHeight = tableHeight
                }
        },
      },
      watch: {
          amplify(newValue,oldValue) {
              this.countTableHeight()
          },
      },
  }
</script>
<style lang="css" scoped>
    .multiRowText {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: auto;
    }
    :deep(.el-scrollbar) {
        text-align: left;
    }
    .detailTable  {
        border-collapse:collapse;
        width: 30%;
        margin-left: 2%;
        margin-top: 1%;
        margin-bottom: 1%;
    }
    .detailTable td{
        border:solid 1px #e3e3e3;
        text-align: center;
    }
    .detailTable tr {
        height: 30px;
    }
    .detailTable tr:first-child{
        font-size: 14px;
        background-color: aliceblue;
    }
</style>